{% load staticfiles %}
<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="utf-8">
    {% block title %}
        <title>数据库管理系统Demo首页</title>
    {% endblock %}
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="{% static 'jquery-ui/jquery-ui.css' %}">
    <!-- 引入bootstrap的css文件 -->
    <link rel="stylesheet" href="{% static 'bootstrap/css/bootstrap.min.css' %}">

    <!-- 引入datatables的css文件 -->
    <link rel="stylesheet" href="{% static 'DataTables/datatables.min.css' %}"/>
    <link rel="stylesheet" href="{% static 'Buttons/css/buttons.dataTables.min.css' %}">
    <link rel="stylesheet" href="{% static 'stylesheets/rowReorder.dataTables.min.css' %}">
    <link rel="stylesheet" href="{% static 'stylesheets/colReorder.dataTables.min.css' %}">
    <link rel="stylesheet" href="{% static 'stylesheets/fixedColumns.dataTables.min.css' %}">
    <link rel="stylesheet" href="{% static 'stylesheets/select.dataTables.min.css' %}">

    <!-- 引入自定义的css样式-->
    <style type="text/css">
        .dropdown-menu a:hover {
            color: #fff;
            background-color: #17a2b8;
            border-color: #fff;
        }

        .checkbox-lg input[type=checkbox] {
            width: 26px;
            height: 26px;
            border: 2px solid;
            border-radius: 5px;
            /*checkbox border color*/
            border-color: #737373;
        }

        .checkbox-lg input[type=checkbox]:checked {
            width: 26px;
            height: 26px;
            /*checkmark arrow color*/
            border: solid white;
            border-width: 0 3px 3px 0;
        }

        .ui-autocomplete {
            z-index: 2147483647;
        }
    </style>
</head>

<body>
<div class="container-fluid">
    <nav class="navbar navbar-expand-lg bg-info navbar-dark">
        <a class="navbar-brand" style="padding: 0 10px;">BGI</a>
        <ul class="nav navbar-nav">
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" id="navbardrop" data-toggle="dropdown"
                   style="margin: 0 20px">样本管理</a>
                <div class="dropdown-menu">
                    <a class="dropdown-item" href="{% url 'Main_model' re_model='Clinical' %}">样本临床信息</a>
                    <a class="dropdown-item" href="{% url 'Main_model' re_model='Extract' %}">样本DNA提取信息</a>
                    <a class="dropdown-item" href="{% url 'Main_model' re_model='DNAUsageRecord' %}">样本DNA使用记录</a>
                    <a class="dropdown-item" href="{% url 'Main_model' re_model='DNAInventory' %}">样本DNA库存</a>
                </div>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" id="navbardrop" data-toggle="dropdown"
                   style="margin: 0 20px">文库管理</a>
                <div class="nav-link navbar-collapse" id="collapsibleNavbar1">
                    <div class="dropdown-menu">
                        <a class="dropdown-item" href="{% url 'Main_model' re_model='Library' %}">样本建库信息</a>
                        <a class="dropdown-item" href="{% url 'Main_model' re_model='Capture' %}">捕获文库信息</a>
                        <a class="dropdown-item" href="{% url 'Main_model' re_model='Pooling' %}">Pooling映射</a>
                    </div>
                </div>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" id="navbardrop" data-toggle="dropdown"
                   style="margin: 0 20px">测序管理</a>
                <div class="nav-link navbar-collapse" id="collapsibleNavbar1">
                    <div class="dropdown-menu">
                        <a class="dropdown-item" href="{% url 'Main_model' re_model='Sequencing' %}">测序上机信息</a>
                        <a class="dropdown-item" href="{% url 'Main_model' re_model='QC' %}">样本测序质控信息</a>
                    </div>
                </div>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" id="navbardrop" data-toggle="dropdown"
                   style="margin: 0 20px">高级功能</a>
                <div class="nav-link navbar-collapse" id="collapsibleNavbar1">
                    <div class="dropdown-menu">
                        <a class="dropdown-item" href="{% url 'AdvanceUpload' %}">订制批量上传</a>
                        <a class="dropdown-item" href="{% url 'AdvancedSearch' %}">高级自主查询</a>
                        <a class="dropdown-item" href="#">预订制查询</a>
                    </div>
                </div>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" id="navbardrop" data-toggle="dropdown"
                   style="margin: 0 20px">用户管理</a>
                <div class="nav-link navbar-collapse" id="collapsibleNavbar1">
                    <div class="dropdown-menu">
                        <a class="dropdown-item" href="{% url 'index' %}">登录/注册</a>
                        <a class="dropdown-item" href="{% url 'user_info' %}">用户信息</a>
                        <a class="dropdown-item" href="{% url 'logout' %}">退出</a>
                    </div>
                </div>
            </li>

        </ul>
    </nav>

    {% block content %}
        <div class="jumbotron">
            <h1>甲基化早筛项目数据库管理系统Demo</h1>
            {% if user.is_authenticated %}
                <p>你已登录，欢迎你：<a href="{% url 'Main_model' re_model='User' %}">{{ user.username }}</a></p>
                <button class="btn btn-default"><a href="{% url 'logout' %}?next={{ request.path }}">注销登录</a>
                </button>
                <button class="btn btn-default"><a href="{% url 'password_change' %}?next={{ request.path }}">修改密码</a>
                </button>
            {% else %}
                <p>你还没有登录，请
                    <button class="btn btn-default"><a href="{% url 'login' %}?next={{ request.path }}">登录</a>
                    </button>
                    或者
                    <button class="btn btn-default"><a href="{% url 'register' %}?next={{ request.path }}">注册</a>
                    </button>
                </p>
            {% endif %}
        </div>
    {% endblock %}

    {% block plot %}

    {% endblock %}

    {% block button %}

    {% endblock %}

    {% block table %}

    {% endblock %}

</div>

<!-- bootstrap.js 依赖 jquery.js 和popper.js，因此在这里引入 -->
<script src="{% static 'jquery/jquery.min.js' %}"></script>
<script src="{% static 'jquery-ui/jquery-ui.js' %}"></script>
<script src="{% static 'popper/popper.min.js' %}"></script>
<!-- 引入bootstrap的js文件 -->
<script src="{% static 'bootstrap/js/bootstrap.min.js' %}"></script>
<!-- 引入datatables的js文件 -->
<script src="{% static 'js/pdfmake.min.js' %}"></script>
<script src="{% static 'js/vfs_fonts.js' %}"></script>
<script src="{% static 'DataTables/datatables.min.js' %}"></script>
<script src="{% static 'Buttons/js/dataTables.buttons.min.js' %}"></script>
<script src="{% static 'js/jszip.min.js' %}"></script>
<script src="{% static 'Buttons/js/buttons.colVis.min.js' %}"></script>
<script src="{% static 'Buttons/js/buttons.html5.min.js' %}"></script>
<script src="{% static 'js/dataTables.select.min.js' %}"></script>
<script src="{% static 'js/dataTables.rowReorder.min.js' %}"></script>
<script src="{% static 'js/dataTables.colReorder.min.js' %}"></script>
<script src="{% static 'js/dataTables.fixedColumns.min.js' %}"></script>
<script src="{% static 'Highcharts/highcharts.js' %}"></script>
<script src="{% static 'Highcharts/highcharts-more.js' %}"></script>

<script>
    $.ajaxSetup({
        headers: {"X-CSRFToken": '{{csrf_token}}'}
    });

    function changeThreeDecimal_f(x) {
        let f_x = parseFloat(x);
        if (isNaN(f_x)) {
            alert('function:changeTwoDecimal->parameter error');
            return false;
        }
        f_x = Math.round(x * 1000) / 1000;
        let s_x = f_x.toString();
        let pos_decimal = s_x.indexOf('.');
        if (pos_decimal < 0) {
            pos_decimal = s_x.length;
            s_x += '.';
        }
        while (s_x.length <= pos_decimal + 3) {
            s_x += '0';
        }
        return s_x;
    }

    function pie_plot(model, field_value, field_text) {
        let ajax_data_dict = $.ajax({
            url: "{% url 'plot_data' %}",
            data: {
                model: model, field: field_value
            },
            dataType: 'json',
            contentType: "application/json",
            method: "GET",
            async: false
        }).responseJSON;
        let chart = {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false
        };
        let title = {
            text: field_text + '占比图 (总数: ' + ajax_data_dict.sum + ')',
            style: {
                fontWeight: "bold"
            }
        };
        let tooltip = {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        };
        let plotOptions = {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: false
                },
                showInLegend: true
            }
        };

        let ajax_data_array = [];
        $.each(ajax_data_dict.data, function (k, v) {
            ajax_data_array.push([k, v]);
        });
        let series = [{
            type: 'pie',
            name: '占比',
            data: ajax_data_array
        }];
        let credits = {
            enabled: false,
            text: ''
        };
        let json = {};
        json.chart = chart;
        json.title = title;
        json.tooltip = tooltip;
        json.series = series;
        json.plotOptions = plotOptions;
        json.credits = credits;

        $('#plot_highcharts').highcharts(json);
    }

    String.format = function (src) {
        if (arguments.length === 0) return null;
        let args = Array.prototype.slice.call(arguments, 1);
        return src.replace(/\{(\d+)\}/g, function (m, i) {
            return args[i];
        });
    };

    function input_autocomplete(values, item_flag) {
        console.info("in function input_autocomplete; values:", values, "; item_flag:", item_flag);
        if (values.length === 0) {
            console.log("empty list. do nothing");
        } else if (values.length > 10) {
            values.push('...');
            $(item_flag).autocomplete({
                autoFocus: false,
                minLength: 3,
                delay: 10,
                source: function (request, response) {
                    let matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex(request.term), "i");
                    let max_match = 15;
                    let n_match = 0;
                    response($.grep(values, function (item) {
                        let flag_match = matcher.test(item);
                        if (item === "..." && n_match === max_match) {
                            return true;
                        } else if (flag_match && n_match < max_match) {
                            n_match += 1;
                            return flag_match;
                        } else {
                            return false;
                        }
                    }));
                },
                focus: function (event, ui) {
                    if (ui.item.label === "...") {
                        $(item_flag).val("");
                    } else {
                        $(item_flag).val(ui.item.label);
                    }
                    return false;
                },
                select: function (event, ui) {
                    if (ui.item.label === "...") {
                        $(item_flag).val("");
                    } else {
                        $(item_flag).val(ui.item.label);
                    }
                    return false;
                }
            });
            console.log("if work");
        } else {
            $(item_flag).autocomplete({
                autoFocus: true,
                minLength: 0,
                delay: 0,
                source: values
            }).autocomplete("search", "");
            console.log("else work");
        }
    }

    function databaseRecordAjaxPut(model_changed_txt, operation_txt, others_txt) {
        let url_record = '/api/DatabaseRecord/';
        let data_record = $.param({
            "nick_name": "{{ user.nick_name }}",
            "model_changed": model_changed_txt,
            "operation": operation_txt,
            "others": others_txt
        });
        $.ajax({
            url: url_record,
            method: 'POST',
            data: data_record,
            headers: {'X-HTTP-Method-Override': 'PATCH'}
        });
    }

    function Median(data_) {
        return Quartile_50(data_);
    }

    function Quartile_25(data_) {
        return Quartile(data_, 0.25);
    }

    function Quartile_50(data_) {
        return Quartile(data_, 0.5);
    }

    function Quartile_75(data_) {
        return Quartile(data_, 0.75);
    }

    function Quartile(data_, q) {
        data_ = Array_Sort_Numbers(data_);
        let pos = ((data_.length) - 1) * q;
        let base = Math.floor(pos);
        let rest = pos - base;
        if ((data_[base + 1] !== undefined)) {
            return data_[base] + rest * (data_[base + 1] - data_[base]);
        } else {
            return data_[base];
        }
    }

    function Array_Sort_Numbers(data_) {
        return data_.sort(function (a, b) {
            return a - b;
        });
    }

    function Array_Sum(data_) {
        return data_.reduce(function (a, b) {
            return a + b;
        }, 0);
    }

    function Array_Average(data_) {
        return Array_Sum(data_) / data_.length;
    }

    function Array_Stdev(data_) {
        let i, j, total = 0, mean = 0, diff_sqred_arr = [];
        for (i = 0; i < data_.length; i += 1) {
            total += data_[i];
        }
        mean = total / data_.length;
        for (j = 0; j < data_.length; j += 1) {
            diff_sqred_arr.push(Math.pow((data_[j] - mean), 2));
        }
        return (Math.sqrt(diff_sqred_arr.reduce(function (firstEl, nextEl) {
            return firstEl + nextEl;
        }) / data_.length));
    }

    function unique(array) {
        return $.grep(array, function (el, index) {
            return index === $.inArray(el, array);
        });
    }

    function range(start, end) {
        let ans = [];
        for (let i = start; i <= end; i++) {
            ans.push(i);
        }
        return ans;
    }
</script>

{% block button_js %}

{% endblock %}

{% block extra_js %}

{% endblock %}

</body>

</html>